<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>成长记录</title>
    <link rel="stylesheet" href="#(CPATH)/_view/static/weui/style/weui.css">
    <link rel="stylesheet" href="#(CPATH)/_view/static/weui/example/example.css">
	<script src="#(CPATH)/_view/static/weui/example/zepto.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script type="text/javascript" src="#(CPATH)/_view/static/layer_mobile/layer.js"></script>
     <script type="text/javascript" src="#(CPATH)/_view/static/js/jquery.min.js"></script>
 </head>
 <body>
  <div class="container" id="container">
  
<div class="page uploader js_show">
    <div class="page__bd">
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
		<input type="hidden" name="pics" id="pics"  >
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                            <div class="weui-uploader__info"></div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                                
                            </ul>
                            <div class="weui-uploader__input-box">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div class="weui-cells__title">描述</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <textarea class="weui-textarea" placeholder="请输入描述" rows="3" id="remark" name="remark"></textarea>
                    <div class="weui-textarea-counter"></div>
                </div>
            </div>
        </div>
    <div class="page__ft ">
        <a href="javascript:save();" class="weui-btn weui-btn_primary" style="background-color:#39a4fe">保存</a>
    </div>
</div>
<script type="text/javascript" class="uploader js_show">
var tmpl = '<li class="weui-uploader__file #className#" style="background-image:url(#url#)"></li>',
$gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderInput = $(".weui-uploader__input-box"),
$uploaderFiles = $("#uploaderFiles"),
localIds = [],
fileHidenPath = ''
;
    $(function(){

        $uploaderInput.on("click", function(e){
        	wx.chooseImage({
                count: 9, // 默认9
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                	layer.open({type: 2});
                    localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    syncUpload();
                }
            });
        });
        $uploaderFiles.on("click", "li", function(){
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function(){
            $gallery.fadeOut(100);
        });
        
        $(".weui-gallery__del").click(function(){
       	 
            var imgback = $(this).parent("div").prev().attr("style");
            
            var imgback_array= imgback.split(')');
            imgback_array= imgback_array[0].split('/');
            var imgName = imgback_array[imgback_array.length-1].replace('.jpg','');
            
            
            var imgUrl = imgback.replace('background-image:url(','').replace(')','').replace('#(CPATH)', '');
            var img_str = $("#pics").val();
            var img_str_new = img_str.replace(imgUrl + "," ,"");
            $("#pics").val(img_str_new);
            $("li." + imgName).remove();
       });
        
        wx.config({
    	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    	    appId: '#(appId)', // 必填，公众号的唯一标识
    	    timestamp: #(timestamp), // 必填，生成签名的时间戳
    	    nonceStr: '#(noncestr)', // 必填，生成签名的随机串
    	    signature: '#(signature)',// 必填，签名
    	    jsApiList: [
    			'chooseImage',
    			'previewImage',
    			'uploadImage',
    			'downloadImage'            
    	    ] // 必填，需要使用的JS接口列表
    	});
        
        wx.ready(function(){

    	});

    	wx.error(function(res){
    		
    	});
    });
    
    function save(){
    	var picStr = $("#pics").val();
    	if(picStr == ''){
    		layer.open({
        	    content: '请上传图片！'
        	    ,skin: 'msg'
        	    ,time: 2 //2秒后自动关闭
        	  });
    		return;
    	}
    	$.ajax({
    		type: "post",
    		url: "#(CPATH)/animalRecord/save",
    		data: {
    			  "petAnimalRecord.pics": picStr
    			  ,"petAnimalRecord.animal_id": #(animal_id)
    			  ,"petAnimalRecord.remark": $("#remark").val()
    		},
    		dataType: "JSON",
    		success: function(data) {
    			if(data.state=='ok'){
    				layer.open({
    		    	    content: '保存成功！'
    		    	    ,skin: 'msg'
    		    	    ,time: 2 //2秒后自动关闭
    		    	    ,end: function () {
    		    	    	window.location.href = '#(CPATH)/animalRecord?animal_id='+#(animal_id);
    		            }
    		    	  });
    			}else{
    				layer.open({
    		    	    content: '保存失败！'
    		    	    ,skin: 'msg'
    		    	    ,time: 2 //2秒后自动关闭
    		    	    
    		    	  });
    			}

    		},
    		error: function() {}
    	});		  
    }

    function syncUpload() {
        if (localIds.length) {
            var localId = localIds.pop();
            wx.uploadImage({
                localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 0, // 默认为1，显示进度提示
                success: function (res) {
                    var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                    //将获取到的 mediaId 传入后台 方法savePicture
                    $.ajax({
    					type: "post",
    					url: "#(CPATH)/animalRecord/saveImages",
    					data: {
    						"mediaId" : mediaId
    						,"animal_id" : #(animal_id)
    					},
    					dataType: "JSON",
    					async: false,
    					success: function(data) {
    						fileHidenPath +=  data.filePath + ',';
    						
    						$("#pics").val(fileHidenPath);
    						var urlStr = $(tmpl.replace('#url#', '#(CPATH)' + data.filePath).replace('#className#', data.fileName));
                        	$uploaderFiles.append(urlStr);
                        	syncUpload();
    					},
    					error: function() {}
    				});		
                },
                fail: function (res) {
                    layer.msgModal('上传图片失败，请重试')
                }
            });
        }else{
        	layer.closeAll('loading');
        }
    }    
</script></div>

	
 </body>

<script>


</script>
</html>
